<template>
	<view class="context" :style=" cW && cW > 0 ? 'width:'+ cW +'px' : ''">
		
		<view class="title-box" @click="openMenu(state == 1 ? '' : 'show')">
			<view class="m-tit" v-if="descObj && descObj.isHasTit">{{descObj && descObj.titleTxt}}</view>
			<text class="title">{{ descObj && descObj.title }}</text>
			<text class="icon-font arrow">{{state == 1 ? '&#xe618;' : '&#xe618;' }}</text>
		</view>
		<!-- 下拉列表 -->
		<view class="mask" 
			:class="state === 0 ? 'none' : state === 1 ? 'show' : ''" @click="openMenu" 
			:style=" top != 0 ? 'top:' + top +'px' : ''">
			<view class="list-content" :style=" cW && cW > 0 ? 'width:'+ cW +'px' : ''">
				<view class="list-box comm-list">
					<view v-for="(item,index) in list && list" :key="index">
						<view class="item" 
							:class="{ active: curId == item.id }" 
							:style="index == list.length - 1? 'border-bottom: none;' :''"
							@click="change(item,index)">{{ item.title }}
						<text class="icon-font sele-icon">{{curId == item.id ? '&#xe636;' : '' }}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import eventCtrl from "../../js/event/EventCtrl.js";
	const TOP = -138;
	const MAX_NUM = 5;
	const ELE_HEIGHT = 34;
	export default {
		props:["descObj","list","cW","pIndex"],
		data() {
			return {
				state:0,
				curId:-1,
				top: 0,
			}
		},
		
		methods: {
			openMenu(act)
			{
				if(!this.list || this.list.length == 0)return;
				this.top = 0;
				let timer = act === 'show' ? 100 : 50;
				let state = act === 'show' ? 1 : 0;
				setTimeout(() => {
					if(state == 1)
					{
						this.addEvent();
						this.initTop();
					}
					this.state = state;
				}, timer);
				if(!act)
				{
					return;
				}
			},
			
			initTop()
			{
				if(this.list.length < MAX_NUM)
					this.top = TOP + (MAX_NUM - this.list.length) * ELE_HEIGHT;
				this.curId = this.descObj.id;
			},
			
			onClickPage()
			{
				if(this.state == 1)
				{
					this.removeEvent();
					this.openMenu();
				}
			},
			
			setCurId(id)
			{
				this.curId = id;
			},
			
			change(item)
			{
				if(this.curId == item.id)return;
				this.curId = item.id;
				this.$emit("changeMenu",item,this.pIndex);
			},
			
			addEvent()
			{
				uni.$on(eventCtrl.CLICK_PAGE_EVENT,this.onClickPage);
			},
			
			removeEvent()
			{
				uni.$off(eventCtrl.CLICK_PAGE_EVENT);
			},
		},
		
		mounted() 
		{
			this.addEvent();
		},
		
	}
</script>

<style lang="scss">
    .context
	{
		width: 300px;
		position: relative;
		background-color: #fff;
		.title-box
		{
			cursor: pointer;
			font-size: 13px;
			color: #333;
			min-width: 200px;
			display: flex;
			align-items: center;
			min-height: 33px;
			// justify-content: space-around;
			border: 1px solid #ECECEC;
			border-radius: 5px;
			position: relative;
			.m-tit
			{
				background-color: #eee;
				padding: 10upx;
				width: 100px;
				text-align: center;
			}
			.title
			{
				width: 250px;
				padding: 10upx;
				padding-left: 10px;
				overflow:hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
				// font-size: 16px;
			}
			.arrow
			{
				width: 20px;
				position: absolute;
				right: 0;
			}
		}
		.mask {
			position: absolute;
			top:-138px;
			// width: 300px;
			height: 100%;
			background: rgba(0, 0, 0, 0);
			z-index: 9;
			transition: 0.3s;
			font-size: 13px;
			color: #333;
			.list-content {
				width: 298px;
				background: $uni-bg-color-grey;
				float: left;
				transform: translateY(100%);
				transition: 0.5s;
				border: 1px solid #ECECEC;
				border-radius: 5px;
				.list-box
				{
					// height: 170px;
					// max-height: 170px;
					height: auto;
					max-height: 170px;
					.item
					{
						cursor: pointer;
						padding: 5px 10px;
						border-bottom: 1px solid #ECECEC;
						position: relative;
						overflow:hidden;
						white-space:nowrap;
						text-overflow:ellipsis;
						.sele-icon
						{
							color: #3388ff;
							font-size: 30px;
							position: absolute;
							right: 0px;
							top:-10px;
						}
					}
					
					.item-last-child
					{
						border-bottom: none;
					}
					.active
					{
						color: #3388ff;
					}
				}
				
			}
			&.none {
				display: none;
			}
			&.show {
				background: rgba(0, 0, 0, 0.0);
				.cate-content {
					transform: translateY(0);
				}
			}
		}
	}
	
	
	
</style>
